<!--
 * hi-list - 列表
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-list" :class="_classes" :style="_styles">
        <view class="hi-list__items">
            <slot></slot>
        </view>

        <!-- 空数据 -->
        <view class="hi-list__empty" v-if="showEmpty && !total && status === 'nomore'">
            <slot name="empty">
                <hi-empty v-bind="emptyOpts"></hi-empty>
            </slot>
        </view>

        <!-- 加载状态 -->
        <view class="hi-list__status" v-else-if="showStatus && !!status">
            <slot name="status">
                <hi-loadmore :status="status" v-bind="statusOpts"></hi-loadmore>
            </slot>
        </view>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { computed } from "vue";
    import props from "./props.js";

    // props
    const _props = defineProps(props);

    // classes
    const _classes = computed(() => {
        const classes = [];
        return classes;
    });

    // styles
    const _styles = computed(() => {
        const styles = [];

        // 列数
        if (_props.cols) styles.push(`--hi-list-columns: ${_props.cols};`);

        // 行列间距
        if (_props.gap) styles.push(`--hi-list-items-gap: ${_props.gap};`);

        return styles;
    });
</script>

<style lang="scss" scoped>
    .hi-list {
        &__items {
            display: var(--hi-list-items-display, grid);
            grid-template-columns: repeat(var(--hi-list-columns, 2), 1fr);
            gap: var(--hi-list-items-gap, 12px);
        }

        &__status {
            margin: var(--hi-list-status-margin, 20px 0);
        }
    }
</style>
